<template>
  <div class="content-container rank-container">

    <div class="search-area">
      <el-form label-width="120px" class="demo-ruleForm" size="mini">
        <el-row class="row-item">
          <el-col :span="24">
            <el-form-item label="统计日期：">
              <el-select v-model="params.statDate" placeholder="请选择统计日期" style="width: 320px">
                <el-option v-for="statDate in statDateList" :key="statDate" :label="statDate" :value="statDate" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-item">
          <el-col :span="12">
            <el-form-item label="关键词：">
              <el-input
                v-model="params.keyword"
                style="width: 320px"
                placeholder="请输入关键词"
                clearable
                class="input-with-select"
                size="mini"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="涨幅：">
              <el-input v-model="params.increaseNumberMin" placeholder="最小值" class="input-with-select" size="mini" />
            </el-form-item>
            <div class="tag"> ~ </div>
            <el-form-item label-width="0px">
              <el-input v-model="params.increaseNumberMax" placeholder="最大值" class="input-with-select" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-item">
          <el-col :span="12">
            <el-form-item label="本周搜索排行：">
              <el-input v-model="params.weekRankMin" placeholder="最小值" class="input-with-select" size="mini" />
            </el-form-item>
            <div class="tag"> ~ </div>
            <el-form-item label-width="0px">
              <el-input v-model="params.weekRankMax" placeholder="最大值" class="input-with-select" size="mini" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="上周搜索排行：">
              <el-input v-model="params.lastWeekRankMin" placeholder="最小值" class="input-with-select" size="mini" />
            </el-form-item>
            <div class="tag"> ~ </div>
            <el-form-item label-width="0px">
              <el-input v-model="params.lastWeekRankMax" placeholder="最大值" class="input-with-select" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="row-item">
          <el-col :span="12">
            <el-form-item label="点击：">
              <el-input v-model="params.clickShareMin" placeholder="最小值" class="input-with-select" size="mini" />
            </el-form-item>
            <div class="tag"> ~ </div>
            <el-form-item label-width="0px">
              <el-input v-model="params.clickShareMax" placeholder="最大值" class="input-with-select" size="mini" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="转化：">
              <el-input v-model="params.transShareMin" placeholder="最小值" class="input-with-select" size="mini" />
            </el-form-item>
            <div class="tag"> ~ </div>
            <el-form-item label-width="0px">
              <el-input v-model="params.transShareMax" placeholder="最大值" class="input-with-select" size="mini" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button class="add btn" type="primary" size="mini" @click="handleSearch">查询</el-button>
            <el-checkbox @change="handleAutoTrans">自动翻译</el-checkbox>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="pagination">
      <el-pagination
        :current-page.sync="params.pageNo"
        :page-size="params.pageSize"
        background
        layout="prev, pager, next, jumper"
        :total="total"
        :pager-count="9"
        @current-change="handleChangePage"
      />
    </div>

    <el-table v-loading="tableLoading" class="data-table" stripe border size="small" :data="tableData" :row-class-name="tableRowClassName" style="width: 100%" @sort-change="handleSort">
      <el-table-column prop="keyword" label="关键词" width="400">
        <template slot-scope="scope">
          <span>{{ scope.row.keyword }}</span>
          <span title="在亚马逊搜索" class="icon-link" @click="viewWithAmz(scope.row.keyword, scope.$index)">
            <svg-icon icon-class="view" />
          </span>
        </template>
      </el-table-column>
      <el-table-column v-if="params.showChinese===1" prop="chineseKeyWord" label="关键词翻译" width="400" />
      <el-table-column prop="weekRank" label="本周搜索排行" sortable="custom" width="180">
        <!-- <template slot="header">
          <span>本周搜索排行</span>
        </template> -->
        <!-- <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template> -->
      </el-table-column>
      <el-table-column prop="lastWeekRank" label="上周搜索排行" sortable="custom" />
      <el-table-column prop="increaseNumber" label="涨幅" sortable="custom">
        <template slot-scope="scope">
          <span>{{ scope.row.increaseNumber }}</span>
          <span :class="getUpDownIconClass(scope.row.increaseNumber)">
            <svg-icon :icon-class="scope.row.increaseNumber === 0 ? '-' : getUpDownIconClass(scope.row.increaseNumber)" />
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="clickShare" label="点击分享" sortable="custom" />
      <el-table-column prop="transShare" label="转化分享" sortable="custom" />
    </el-table>

    <div class="pagination">
      <el-pagination
        :current-page.sync="params.pageNo"
        :page-size="params.pageSize"
        background
        layout="prev, pager, next, jumper"
        :total="total"
        :pager-count="9"
        @current-change="handleChangePage"
      />
    </div>
  </div>
</template>

<script>
import { search, getStatDateList } from '@/api/keyword/rank.js'

export default {
  name: 'Rank',

  data() {
    return {
      currentIndex: -1,
      statDateList: [],
      params: {
        statDate: '',
        keyword: '',
        showChinese: 0,
        clickShareMax: null,
        clickShareMin: null,
        increaseNumberMax: null,
        increaseNumberMin: null,
        lastWeekRankMax: null,
        lastWeekRankMin: null,
        transShareMax: null,
        transShareMin: null,
        weekRankMax: null,
        weekRankMin: null,
        pageNo: 1,
        pageSize: 50,
        sortFieldName: '',
        asc: 1,
        date: '' // 字符串
      },
      tableLoading: false,
      total: 0,
      tableData: []
    }
  },
  mounted() {
    this.loadStatDateList()
  },

  methods: {

    loadStatDateList() {
      const self = this
      self.tableLoading = true
      getStatDateList().then((res) => {
        const { data } = res
        self.params.statDate = data.length > 0 ? data[data.length - 1] : ''
        self.statDateList = data
        self.searchList() // 初始化执行
      }).catch((err) => {
        console.error(err)
        self.tableLoading = false
      })
    },

    searchList() {
      const self = this
      self.tableLoading = true
      self.currentIndex = -1
      search(self.params).then((res) => {
        const { data } = res
        self.tableData = data.records
        self.total = data.total
        self.tableLoading = false
        // console.log(data)
      }).catch((err) => {
        console.error(err)
        self.tableLoading = false
      })
    },

    handleSearch() {
      this.searchList()
    },

    handleChangePage() {
      this.searchList()
    },

    handleSort({ column, prop, order }) {
      // console.log(column, prop, order)
      this.params.sortFieldName = prop
      if (order === 'ascending') {
        this.params.asc = 1
      } else if (order === 'descending') {
        this.params.asc = 0
      }
      this.searchList()
    },

    getUpDownIconClass(increaseNumber) {
      if (increaseNumber > 0) {
        return 'up'
      } else if (increaseNumber < 0) {
        return 'down'
      }
    },

    handleAutoTrans(value) {
      const self = this
      if (value) {
        self.params.showChinese = 1
        self.searchList() // 直接重新查询
      } else {
        self.params.showChinese = 0
      }
    },

    viewWithAmz(keyword, index) {
      const self = this
      self.currentIndex = index
      const amzurl = `https://www.amazon.com/s?k=${self.urlencode(keyword)}&ref=nb_sb_noss_1`
      window.open(amzurl, '_blank')
    },

    tableRowClassName({ row, rowIndex }) {
      const self = this
      if (rowIndex === self.currentIndex) {
        return 'current-row-class'
      }
      return ''
    },

    urlencode(str) {
      str = (str + '').toString()
      return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27')
        .replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+')
    }
  }
}
</script>

<style lang="scss" >
.rank-container {
  .el-loading-spinner {
    top: 100px;
  }
  .current-row-class {
    td {
      background: #67C23A !important;
    }
  }
}
</style>

<style lang="scss" scoped>
.content-container {
  margin: 10px 15px;

  .icon-link{
    cursor: pointer;
    margin-left: 15px;
  }

  .data-table {
    .down {
      color: #008000;
    }
    .up {
      color: #ff0000;
    }
  }
  .pagination {
    margin: 20px 0;
  }
  .search-area {
    border: 1px solid #eeeeee;
    border-radius: 5px;
    padding: 10px;
    margin-top: 20px;
    min-width: 1035px;
    .el-input--suffix {
      .el-input__inner {
        padding: 0 0;
      }
    }
    .row-item {
      .el-form-item,
      div.tag {
        float: left;
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        color: #606266;
        line-height: 30px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
    }
  }
  .btn{
    margin-right: 20px;
  }
}
</style>
